<template>
  <view class="pages">
    <!-- <view class="hr"></view> -->
    <view class="cell" @tap="chooseUserList">
      <viwe class="cell-left">家庭成员</viwe>
      <viwe class="cell-right">
        <view>{{form.memberText||'请选择'}}</view>
        <uni-icons type="arrowright" size="16" color="#b7c5dd"></uni-icons>
      </viwe>
    </view>
    <view class="cell" @tap="chooseRelation">
      <viwe class="cell-left">家庭关系</viwe>
      <viwe class="cell-right">
        <view>{{form.memberTypeText||'请选择'}}</view>
        <uni-icons type="arrowright" size="16" color="#b7c5dd"></uni-icons>
      </viwe>
    </view>
    <view class="hr"></view>
    <view class="cell">
      <view class="title">
        <input maxlength="200" disabled v-model="form.phone" placeholder="请输入电话号码" />
      </view>
    </view>
    <!-- <view class="cell">
      <view class="title">
        <input maxlength="200" v-model="form.remark" placeholder="请输入备注" />
      </view>
    </view> -->
    <view class="botton">
      <button class="botton-botton" @tap="submit">提交</button>
    </view>
    <uni-popup ref="popup" type="bottom">
      <scroll-view class="popupView" scroll-y="true">
        <uni-list>
          <uni-list-item v-for="(item,index) in typeList" clickable :key="index" :title="item.dicData1" @click="cheeckType(item)"></uni-list-item>
        </uni-list>
      </scroll-view>
      <view class="botton popupBotton">
        <button class="botton-botton" @click="$refs.popup.close()">取消</button>
      </view>
    </uni-popup>
  </view>
</template>

<script>
let id = null
export default {
  data() {
    return {
      type: 0,
      form: {
        memberId: '',
        memberText: '',
        memberTypeId: '',
        memberTypeText: '',
        phone: '',
      },
      id: '',
      typeList: []
    }
  },
  onLoad(e) {
    id = e.id
    this.getTypes()
  },
  onShow() {
    const _this = this
    uni.getStorage({
      key: 'user_key',
      success: function (res) {
        uni.removeStorage({ key: 'user_key' });
        _this.form.memberId = res.data.id
        _this.form.phone = res.data.customerPhone
        _this.form.memberText = res.data.customerName
        _this.form.memberTypeText = res.data.memberType
        _this.form.memberTypeId = res.data.memberTypeId
      }
    });
  },
  methods: {
    getTypes() {
      const _this = this
      _this.$post('/sale/wx/dic/get_datas', { dicType: 1 }, false).then(res => {
        if (res.code * 1 === 200) {
          _this.typeList = res.data
        }
      })
    },
    cheeckType(e) {
      const _this = this
      _this.form.memberTypeId = e.id
      _this.form.memberTypeText = e.dicData1
      _this.$refs.popup.close()
    },
    chooseUserList() {
      uni.navigateTo({
        url: '/pages/common/userList'
      });
    },
    chooseRelation() {
      this.$refs.popup.open()
    },
    submit() {
      const _this = this
      if (!_this.form.memberTypeId) {
        uni.showToast({
          title: '请选择家庭成员',
          icon: 'none'
        })
        return
      }
      if (!_this.form.memberTypeId) {
        uni.showToast({
          title: '请选择家庭关系',
          icon: 'none'
        })
        return
      }
      _this.$post('/sale/wx/customer_member/add_data', { ..._this.form, customerId: id }, true).then(res => {
        if (res.code * 1 === 200) {
          uni.showToast({
            title: '添加成功',
            icon: 'none'
          })
          uni.navigateBack({
            delta: 1
          });
        }
      })
    },
  }
}
</script>
<style lang="scss" scope>
.popupView {
  max-height: 50vh;
  overflow: auto;
}
.popupBotton {
  background: #fff;
}
.pages {
  padding: 10px 3vw;
}
.cell {
  width: 94vw;
  padding: 10px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  &-left {
    font-size: 16px;
    font-weight: bold;
    color: #000;
  }
  &-right {
    display: flex;
    font-size: 16px;
    color: #96968e;
    align-items: center;
    .uni-icons {
      padding-left: 5px;
    }
  }
}
.title {
  height: 45px;
  width: 94vw;
  background: #f6f6f6;
  border-radius: 10px;
  font-weight: bold;
  input {
    width: 100%;
    height: 100%;
    padding-left: 10px;
  }
}
.hr {
  background: #ddd;
  height: 1px;
  width: 100%;
  margin: 10px 0;
}
.botton {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px 0;
  &-botton {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 80rpx;
    border-radius: 20px;
    width: 70vw;
    color: #fff;
    background: #ed7467;
  }
}
</style>
